<script setup>

</script>

<template>
  <header>
    <h1>我的HTML学习笔记</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <section>
        <h2>HTML 学习内容</h2>
        <p><strong>强调重要内容：</strong> 这是一个 <mark>高亮关键词</mark> 的示例。<br>这是段落中的换行。</p>
        <p><em>强调文本：</em> 这是被强调的文本内容，包含一个 HTML 标签示例：&lt;p&gt;这是一个段落标签&lt;/p&gt;。</p>

        <h3>学到的 HTML 知识点</h3>
        <ul>
          <li>HTML 基本结构</li>
          <li>常用标签及其用途</li>
          <li>表单和输入元素</li>
        </ul>

        <h3>学习 HTML 的步骤</h3>
        <ol>
          <li>了解基本语法和结构</li>
          <li>掌握常用标签和属性</li>
          <li>实践构建简单网页</li>
        </ol>

        <h3>HTML 术语定义</h3>
        <dl>
          <dt>HTML</dt>
          <dd>超文本标记语言，用于创建网页结构。</dd>
          <dt>CSS</dt>
          <dd>层叠样式表，用于控制网页外观。</dd>
          <dt>DOM</dt>
          <dd>文档对象模型，表示网页的结构化形式。</dd>
        </dl>

        <h3>HTML 版本及发布时间</h3>
        <table>
          <thead>
          <tr>
            <th>版本</th>
            <th>发布时间</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>HTML5</td>
            <td>2014年</td>
          </tr>
          <tr>
            <td>HTML5.2</td>
            <td>2017年</td>
          </tr>
          </tbody>
        </table>
      </section>

      <aside>
        <p>这是一个补充信息框。</p>
      </aside>
    </article>

    <section>
      <h2>图片与链接</h2>
      <p>以下是一张插入的图片：</p>
      <img src="https://via.placeholder.com/400x200" alt="占位图">
      <p>更多关于 HTML 的信息可以访问：<a href="https://developer.mozilla.org">MDN 文档</a>。</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 我的公司</p>
  </footer>
</template>

<style scoped>

</style>
